<template>
	<view>
		<view class="bartop"></view>
		<view class="cu-bar">
			<view class="action">
				<text class="cuIcon-back text-gray" @tap="goBack"></text> 返回
			</view>
			<view class="text-lg text-bold">
				报表填报管理
			</view>
			<view class="action">
				<text class="text-lg" style="color: #13227a;" @tap="submit()">完成</text>
			</view>
		</view>
		<form ref="form">
			<view class="cu-form-group">
				<view class="title">组别</view>
				<input class="text-right" placeholder="请输入组别" name="group" v-model="group"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>订单号</view>
				<input class="text-right" placeholder="请输入订单号" name="order_id" v-model="orderId"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>产品型号</view>
				<song-data-picker style="width: 75%; display: flex; justify-content: flex-end; overflow: auto;"
					:localdata="product.types" popup-title="请选择产品型号" :openSearch="true" :border="false"
					v-model="product.newindex">
				</song-data-picker>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>排产数量</view>
				<input name="order_number" type="number" placeholder="请输入排产数量" v-model="contractQuantity"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>组装数量</view>
				<input name="qualified_quantity" type="number" placeholder="请输入组装数量"
					v-model="assembledQuantity"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>残品数量</view>
				<input name="scrapped_part" type="number" placeholder="残品数量" v-model="scrappedPart"></input>
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>操作工</view>
				<select-cy ref="vref" :valueShow="operator.valueShow" :value="operator.newindex" slabel="trueName"
					svalue="userId" placeholder="请选择操作工" :options="operator.types" @change="OperatorChange">
				</select-cy>


				<!-- <picker v-if="operator.types" @change="OperatorChange" :name="operator.key" :value="operator.newindex"
					:range="operator.types" range-key="trueName">
					<view v-if="operator.types" class="picker">
						{{ operator.types[operator.newindex].trueName }}
					</view>
				</picker> -->
			</view>
			<view class="cu-form-group">
				<view class="title"><text class="text-red cuIcon-must"></text>计算类型</view>
				<radio-group name="" @change="calculationTypeChange">
					<label>
						<radio style="transform: scale(0.7);" value=0 :checked="calculationType==0" /><text>计件</text>
					</label>
					<label>
						<radio style="transform: scale(0.7);" value=1 :checked="calculationType==1" /><text>计时</text>
					</label>
				</radio-group>

			</view>
			<view class="cu-form-group">
				<view class="title">计时时间</view>
				<input placeholder="请输入计时时间" name="shijian" v-model="shijian"></input>
			</view>

			<view class="cu-form-group margin-top">
				<view class="title">其他工作</view>
				<textarea maxlength="-1" @input="textareaInput" placeholder="请输入其他工作" v-model="otherWork"></textarea>
			</view>
		</form>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				index: -1,
				product: {
					newindex: -1,
					key: 'productId',
					name: '产品名称',
					types: this.$cache.get("zzProducts")
				},
				operator: {
					newindex: [],
					valueShow: [],
					key: 'operator',
					name: '操作工',
					types: null
				},
				id: null,
				group: null, //组别
				orderId: null, //订单号
				contractQuantity: 0, //排产数量
				assembledQuantity: 0, //生产合格数量
				workingHours: null, //实际生产工时
				scrappedPart: null, //残品数量
				shijian: null, //产品单重
				groupId: null,
				calculationType: 0,
				otherWork: null
			}
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(options.data)
				console.log(data)
				this.id = data.id
				this.group = data.groupZ
				this.orderId = data.orderId
				this.product.newindex = parseInt(data.model)
				this.contractQuantity = data.contractQuantity
				this.assembledQuantity = data.assembledQuantity
				this.scrappedPart = data.scrappedPart
				this.accumulateNumber = data.accumulateNumber
				this.shijian = data.shijian
				this.otherWork = data.otherWork
				this.groupId = data.groupid
				this.operator.newindex = JSON.parse(data.operator)
			}
			this.getOperator()


		},
		methods: {
			ClassesChange(e) {
				this.classes.newindex = e.detail.value
			},
			ProductIdChange(e) {
				// this.product.newindex = e.detail.value
				console.log(e.detail.value)
			},
			mySearchFn(searchList, searchWord) {
				return searchList.filter(x => x.searchText.includes(searchWord));
			},
			NumberChange(e) {
				this.machineNumber.newindex = e.detail.value
			},
			MaterialIdChange(e) {
				this.material.newindex = e.detail.value
			},
			ColourIdChange(e) {
				this.colour.newindex = e.detail.value
			},
			OperatorChange(item, value) {
				this.operator.newindex = value
				let temp = []
				this.operator.types.forEach((item) => {
					if (value.includes(item.userId)) {
						temp.push(item.trueName)
					}
				})
				this.operator.valueShow = temp
			},
			textareaInput(e) {
				this.otherWork = e.detail.value
			},
			calculationTypeChange(e) {
				this.calculationType = e.detail.value
			},
			submit() {
				// console.log(this.operator.newindex)

				if (this.validateData()) return

				let productId = 0
				if (this.product.newindex.length !== -1) {
					productId = this.product.newindex
				} else {
					uni.showToast({
						title: "请选择产品名称",
						icon: 'none',
						mask: true
					})
					return
				}
				let groupId = this.groupId
				if (groupId == null) {
					groupId = this.$cache.get("groupId")
				}
				let operator = JSON.stringify(this.operator.newindex)
				let scdate = Math.round(new Date() / 1000)
				let param = {
					"groupZ": this.group,
					"orderId": this.orderId,
					"model": productId + "",
					"groupid": groupId,
					"calculationType": this.calculationType,
					"contractQuantity": parseInt(this.contractQuantity),
					"assembledQuantity": parseFloat(this.assembledQuantity),
					"scrappedPart": parseInt(this.scrappedPart),
					"operator": this.operator.newindex,
					"shijian": this.shijian,
					"otherWork": this.otherWork,
					"date": scdate
				}
				if (this.id) {
					param.id = this.id
				};
				this.$Request.post(this.$httpApi.assemble.add, param).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '保存成功',
							icon: '2|success,none|',
							mask: true
						})

						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							mask: true
						})
					}
				})
			},
			validateData() {
				let errorCode = ""
				if (!this.orderId) {
					errorCode = "请输入订单号"
				} else if (!this.contractQuantity) {
					errorCode = "请输入排产数量"
				} else if (!this.assembledQuantity) {
					errorCode = "请输入组装数量"
				} else if (!this.scrappedPart) {
					errorCode = "请输入残品数量"
				} else if (this.operator.newindex.length == 0) {
					errorCode = "请选择操作工"
				}
				if (errorCode != "") {
					uni.showToast({
						title: errorCode,
						icon: 'none',
						duration: 2000
					});
					return true
				}
				return false

			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getOperator() {
				let groupId = this.groupId
				console.log(groupId)
				if (groupId == null) {
					groupId = this.$cache.get("groupId")
				}

				this.$Request.post(this.$httpApi.operator.operatorList + "?groupId=" +
					groupId).then(res => {
					if (res.code == 200) {
						this.operator.types = res.data
						let temp = []
						this.operator.types.forEach((item) => {
							if (this.operator.newindex.includes(item.userId)) {
								temp.push(item.trueName)
							}
						})
						this.operator.valueShow = temp
						var child = this.$refs.vref;
						child.options = this.operator.types

						child.init()
						console.log(this.operator.valueShow)
					}
				})
			}
		},

	}
</script>

<style>
	.cu-list.menu>.cu-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.selected-area {
		justify-content: flex-end;
	}

	input {
		text-align: right;
	}
</style>
